<template>
    <section id="cicd-add-view" >
        <el-row >
    <el-col :span="3" style="margin-right: 10px;">

        <div style="margin-bottom: 10px">
            <el-link  :href="'#/deploy/items'  "  :underline="false" style="color: #5c3566;font-size: 15px"><i class="fa fa-arrow-circle-up" style="color: green"></i>  返回面板</el-link>
        </div>
    <div style="margin-bottom: 10px">
        <el-link href="#/deploy/item/add"  :underline="false" style="color: #5c3566;font-size: 15px"><i class="el-icon-circle-plus" style="color: #6699FF"></i>  新建项目</el-link>
    </div>
    <div style="margin-bottom: 10px">
        <el-link  :underline="false" style="color: #204A87;font-size: 15px"><i class="el-icon-setting" style="color: #FF6600"></i>  构建并发数</el-link>
    </div>


        <el-collapse  style="margin-top: 30px" v-model="activeNames">
            <el-collapse-item title="构建列队" style="margin-bottom: 5px" name="1">
                <template slot="title">
                    <i class="header-icon fa fa-list-ol" style="margin-left: 5px;color: blue"></i> &nbsp;构建队列
                </template>
                <ul>
                    <li>咖啡</li>
                    <li>茶</li>
                    <li>牛奶</li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="执行状态" name="2" >
                <template slot="title">
                    <i class="header-icon fa fa-clock-o" style="margin-left: 5px;color: blue"></i> &nbsp;执行状态
                </template>

                    <div v-for="(progress,name) in progressData " style="height: 20px" >
                        <el-col :span="10" style="font-size: 10px;margin-left: 20px">{{name}}</el-col>
                        <el-col :span="10" >
                            <div style="margin-top: 8px">
                        <el-progress :percentage="progress.precent" color="#99CCFF"  :show-text="false" style="vertical-align: middle"></el-progress>
                            </div>
                        </el-col>
                    </div>


            </el-collapse-item>

        </el-collapse>

</el-col>


        <el-col :span="12" >
            <el-card>
            <el-form ref="viewData" :model="viewData" label-width="80px" :rules="addDeployViewRules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="viewData.name" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="项目选择" prop="itemsFilter">
                    <el-transfer v-model="viewData.items" :data="deploymentNames" :titles="['所有项目', '视图项目']"
                                 filterable
                                 :filter-method="filterMethod"
                                 filter-placeholder="请输入项目名"


                    ></el-transfer>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="createDeployView('viewData')">创建</el-button>
                    <el-button size="mini" @click="linkToManageer">取消</el-button>
                </el-form-item>
            </el-form>
            </el-card>




        </el-col>
        </el-row>



    </section>
</template>
<script>
    import { getDeployItems,StartDeploy,AddDeployView,LoadProgressData } from '../../../api/api'

    export default {
        data() {
            var itemsFilterCheck = (rule, value, callback) => {

                let self = this

                if (self.viewData.items.length === 0 ) {
                    callback(new Error('请选择项目'));
                } else {
                    callback()
                }

            };
            return {
                filters: {
                    itemName: ''
                },
                activeNames: ['2'],

                deploymentNames: [],


                viewData : {
                    name: "",
                    items:  [],
                },
                addDeployViewRules: {
                    name: [
                        { required: true, message: '请输入项目名-英文字母', trigger: 'blur' },
                    ],
                    itemsFilter: [
                        { required: true,validator: itemsFilterCheck, trigger: 'blur'}
                    ],

                },


                progressData: {
                },



                //old config
                editableTabsValue: 'default',
                editableTabs: [ ],
                tabIndex: 0,
                configItemTabs: [ ],
                workspaceItemTabs: [ ],
                outputItemTabs: [ ],
                files: [],
            }
        },
        methods: {


            //new config

            getAllDeployItems(){
                let self = this
                getDeployItems().then((res) => {
                    console.log(res.data.items)
                    res.data.items.forEach((item,index) => {
                            self.deploymentNames.push({
                                key: item.name,
                                label: item.name,
                            })

                        }
                    )
                    console.log("sssss")
                    console.log(self.deploymentNames)
                    }
                )
            },
            getProgressData(){
                let self = this
                LoadProgressData().then((res) => {
                        console.log(res.data)

                        if ( res.data.visible) {
                            console.log(" here ",res.data.progressResult)
                            self.progressData = JSON.parse(res.data.progressResult)
                        } else {
                            self.progressData = {}
                        }
                        //self.progressData = JSON.parse(res.data.progressResult)
                        //setTimeout(this.getProgressData, 3000)
                    }
                )
            },


            linkToConfigEdit(index,row) {
                this.$router.push('/deploy/item/' + row.name + '/config')
            },
            linkToWorkspace(index,row) {
                this.$router.push('/deploy/item/' + row.name + '/workspace')
            },
            linkToManageer() {
                this.$router.push('/deploy/items')
            },


            filterMethod(query, item) {
                return item.label.indexOf(query) > -1;
            },
            createDeployView(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.viewData.items)
                        let param = {name:this.viewData.name,items:this.viewData.items}
                        AddDeployView(param).then((res) => {
                            if (res.code === 400) {
                                this.$message({
                                    message: "Warning: 创建失败 " + res.message ,
                                    type: 'error',
                                    duration: 1000,
                                });
                            }else {
                                this.$message({
                                    message: " 创建成功 "  ,
                                    type: 'success',
                                    duration: 1000,
                                });

                                this.$router.push('/deploy/items')
                            }
                        })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });



            }


        },

        mounted() {

            this.getAllDeployItems();
            this.getProgressData()   //加载页面马上刷新
            const timer = setInterval(() =>{
                this.getProgressData()
            }, 300000);
            // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
            this.$once('hook:beforeDestroy', () => {
                clearInterval(timer);
            })



        },
    }
</script>
<style>
    #cicd-add-view .el-collapse-item__header{
        background-color: #E6E6E6;
        height: 30px;
        border-radius: 8px;
    }
    #cicd-add-view .el-collapse-item__content {
        padding-bottom: 5px;
    }

    #cicd-add-view .el-transfer-panel{
        width: 250px;
        height: 500px;
        max-height: 800px;
    }
    #cicd-add-view .el-transfer-panel__list.is-filterable{
        height: 400px;
        max-height: 800px;
    }
    #cicd-add-view .el-transfer-panel .el-transfer-panel__header {
        background-color: #E6E6E6;
    }


</style>